<template>
  <div class="component-two">
    <div>{{ title ?? "组件二" }}：{{ piniaVal }}</div>
    <el-button @click="carryParent">调用父组件的方法</el-button>
  </div>
</template>

<script lang="ts" setup>
import { defineProps, useAttrs } from "vue";
import { useVueComponent } from "@/store/vueComponentCommunication";
import { storeToRefs } from "pinia";
const store = useVueComponent();
const { piniaVal } = storeToRefs(store);

defineProps({
  title: String,
});

const attr:any = useAttrs();
const carryParent = () => {
  console.log(attr);
  attr.onAttrChange();
};
</script>
<style scoped lang="scss">
.component-two {
  padding: 4px 0;
  background-color: burlywood;
}
.input-box {
  display: flex;
  margin: 8px 0;
  .el-input {
    width: 200px;
    margin-right: 12px;
  }
}
</style>
